<template>
<div>
 <p>Ready: {{ isReady }}</p>
 <p>Loading: {{ isLoading }}</p>
 <pre lang="json">{{ state }}</pre>
 <button @click="execute(7000, { id: 789 })">执行</button>
</div>
</template>
<script setup lang="ts">
import { useAsyncState } from '@vueuse/core';

defineOptions({
  name: 'UseAsyncState'
})

const fetchPromise = (args: any) => new Promise<any>(resolve => {
  console.log('args:', args)
  setTimeout(() => {
    resolve({
      userId: 1,
      id: args?.id,
      title: "this is title"
    })
  }, 3000)
})

// 后面的 { extId: 555, id: 666 } 表示的事初始值，并不是初始参数
const { state, isReady, isLoading, execute } = useAsyncState(
  args => fetchPromise(args),
  { extId: 555, id: 666 }
)
</script>